<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期联动菜单</title>
    <script>
        function loadDate() {
            let year = document.getElementById("year");
            let currYear = new Date().getFullYear();
            for (let i = currYear; i >= currYear - 30; i--) {
                year[year.length] = new Option(i + "年", i);
            }

            let month = document.getElementById("month");
            for (let i = 1; i <= 12; i++) {
                month[month.length] = new Option(i + "月", i);
            }
        }

        function loadDay() {
            // 通过下拉列对象.value可以直接获取当前所选的选项的value属性值
            let year = document.getElementById("year").value;
            let month = document.getElementById("month").value;
            let day = document.getElementById("day");

            // 加载前清除下拉列中原有的选项,保留第一个
            day.length = 1;

            // 当选择的年份或者月份是无效的时候,不需要加载天数
            // 即:只要有任何一个下拉列其选择的选项的服务器值为-1,就不需要加载天数
            if (year == -1 || month == -1) {
                return;
            }
            // 根据已知年份与月份求出天数
            let countDay = new Date(year, month, 0).getDate();
            for (let i = 1; i <= countDay; i++) {
                day[day.length] = new Option(i + "日", i);
            }
        }
    </script>
    <script>
    </script>
</head>
<body onload="loadDate()">
<!--
    页面加载之后,自动加载所有的年份与月份
    年份加载当前年份的前三十年
    月份固定为1-12月
    当用户选择了年份与月份之后加载对应的天数
-->
<select id="year" onchange="loadDay()">
    <option value="-1">请选择年份</option>
</select>
<select id="month" onchange="loadDay()">
    <option value="-1">请选择月份</option>
</select>
<select id="day">
    <option value="-1">请选择天数</option>
</select>
</body>
</html>